export const oneLineShow = (
    content: string,
    width?: number,
    fontSize?: number,
    lineHeight = 16,
) => {
    content = String(content);
    if (!fontSize) {
        fontSize = 14;
    }
    if (!width) {
        width = 100;
    }
    const firstLineContent = content.match(/<div>.*?<\/div>/);
    let showContent;
    if (firstLineContent) {
        width = firstLineContent[0].replace('<div>', '').replace('</div>', '').length * 14 + 12;

        showContent = <div dangerouslySetInnerHTML={{ __html: firstLineContent[0] + '...' }} />;
    } else {
        showContent = <div dangerouslySetInnerHTML={{ __html: content }} />;
    }
    const stringToHTML = function (str) {
        const dom = document.createElement('div');
        dom.innerHTML = str;
        return dom;
    };
    const newDom = stringToHTML(content);

    function findTextNode(tag) {
        let child = tag.childNodes,
            type,
            result = '';

        for (let i = 0; i < child.length; i++) {
            type = child[i].nodeType;

            if (type == 3) {
                result += child[i].nodeValue;
            } else if (type == 1) {
                // @ts-ignore
                result += findTextNode(child[i]);
            }
        }

        return result;
    }

    const realContent = findTextNode(newDom);

    content = <div dangerouslySetInnerHTML={{ __html: content }} />;
    const chineseLength = realContent.match(/[\u4e00-\u9fa5]/g)?.length || 0;

    const result = isOverLines(realContent, width, fontSize, lineHeight, 1) ? (
        <Popover
            placement="bottom"
            content={<div style={{ maxWidth: '400px', wordWrap: 'break-word' }}>{content}</div>}
        >
            <div className="text-one-line-ellipsis" style={{ width }}>
                {showContent}
            </div>
        </Popover>
    ) : (
        <div
            style={{ minWidth: chineseLength * 16 + (realContent.length - chineseLength) * 10 + 'px' }}
        >
            {content}
        </div>
    );
    return result;
    function isOverLines(
        content: string,
        width: number,
        fontSize: number,
        lineHeight = 16,
        lines = 3,
    ) {
        const testDom = document.createElement('div');
        testDom.style.width = `${width}px`;
        testDom.style.fontSize = `${fontSize}px`;
        testDom.style.position = 'fixed';
        testDom.style.visibility = 'hidden';
        testDom.style.wordBreak = 'break-all';
        testDom.style.lineHeight = `${lineHeight}px`;
        testDom.innerHTML = content;
        document.body.appendChild(testDom);
        const { height } = testDom.getBoundingClientRect();
        document.body.removeChild(testDom);
        return height > lineHeight * lines;
    }
};


//     .text - one - line - ellipsis {
//     overflow: hidden;
//     text - overflow: ellipsis;
//     display: -webkit - box;
//     -webkit - line - clamp: 1;
//     -webkit - box - orient: vertical;
// }